<template>
  <s-page custom-class="Image-Page">
    <s-row :gutter="30">
      <s-col :span="12">
        <s-button type="primary" plain block @click="changeSrc">换图</s-button>
      </s-col>
      <s-col :span="12">
        <s-button type="primary" block @click="goLazy">lazyLoad示例</s-button>
      </s-col>
    </s-row>

    <c-demo-block title="基础用法">
      <s-row gutter="40" gutter-y="40">
        <s-col span="8">
          <s-image :src="src" />
          <view class="mode-text">默认 scaleToFill</view>
        </s-col>
      </s-row>
    </c-demo-block>

    <c-demo-block title="填充模式+淡入显示">
      <s-row gutter="40" gutter-y="40">
        <s-col v-for="mode of modeList" :key="mode" span="8">
          <s-image :src="src" :mode="mode" fade-show />
          <view class="mode-text">{{ mode }}</view>
        </s-col>
      </s-row>
    </c-demo-block>

    <c-demo-block title="圆形图片+淡入显示+loading">
      <s-row gutter="40" gutter-y="40">
        <s-col span="8">
          <s-image :src="src" mode="scaleToFill" show-loading fade-show round />
          <view class="mode-text">scaleToFill</view>
        </s-col>
        <s-col span="8">
          <s-image :src="src" mode="aspectFill" show-loading fade-show round />
          <view class="mode-text">aspectFill</view>
        </s-col>
        <s-col span="8">
          <s-image :src="src" mode="center" show-loading fade-show round />
          <view class="mode-text">center</view>
        </s-col>
      </s-row>
    </c-demo-block>

    <c-demo-block title="加载中提示">
      <s-row gutter="40" gutter-y="40">
        <s-col span="8">
          <s-image :src="src" show-loading loading />
          <view class="mode-text">默认提示</view>
        </s-col>
        <s-col span="8">
          <s-image :src="src" show-loading loading>
            <template #loading>
              <s-loading />
            </template>
          </s-image>
          <view class="mode-text">自定义提示</view>
        </s-col>
      </s-row>
    </c-demo-block>

    <c-demo-block title="加载失败提示">
      <s-row gutter="40" gutter-y="40">
        <s-col span="8">
          <s-image :src="src" error />
          <view class="mode-text">默认提示</view>
        </s-col>
        <s-col span="8">
          <s-image :src="src" error>
            <template #error>
              <view>加载失败</view>
            </template>
          </s-image>
          <view class="mode-text">自定义提示</view>
        </s-col>
      </s-row>
    </c-demo-block>
  </s-page>
</template>

<script>
const srcList = [
  'https://gitee.com/sldt/s-ui/raw/master/static/imgs/banner-1.jpg',
  'https://gitee.com/sldt/s-ui/raw/master/static/imgs/banner-2.jpg',
  'https://gitee.com/sldt/s-ui/raw/master/static/imgs/banner-3.jpg',
];

export default {
  data: () => ({
    srcIndex: 0,
    src: srcList[0],
    modeList: [
      'scaleToFill',
      'aspectFill',
      'widthFix',
    ],
  }),
  methods: {
    changeSrc() {
      if (this.srcIndex >= srcList.length - 1) {
        this.srcIndex = 0;
      } else {
        this.srcIndex++;
      }
      this.src = srcList[this.srcIndex];
    },
    goLazy() {
      uni.navigateTo({ url: '/pages/basic/image/lazy' });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: $white;
}
.Image-Page {
  padding: $padding-md;
  .mode-text {
    color: $tips-color;
    text-align: center;
    margin-top: 20rpx;
  }
  ::v-deep {
    .s-image {
      width: 100%;
      height: 27vw;
    }
  }
}
</style>
